<template>
  <div class="nickname_page">
    <!-- 导航 开始 -->
    <nav-bar title="修改昵称"></nav-bar>
    <!-- 导航 end -->

    <div class="form_cell">
      <input
        type="text"
        v-model.trim="nickname"
        class="a_input"
        placeholder="请输入昵称"
        maxlength="10"
      />
    </div>

    <div class="btn_group">
      <button class="btn" @click="saveInfo">保存</button>
    </div>
  </div>
</template>
<script>
import { UPDATE_PERSONAL_NICKNAME, GET_PERSONAL_INFO } from "@/http/interface";
import { showToast } from "@/utils/utils";
export default {
  data() {
    return {
      nickname: "",
      userInfo: {},
    };
  },
  async asyncData({ $axios }) {
    let res = await $axios.get(GET_PERSONAL_INFO);
    let userInfo = res.data || {};
    console.log(userInfo);
    return { nickname: userInfo.username, userInfo };
  },
  methods: {
    // 保存数据
    async saveInfo() {
      let _name = this.nickname;
      if (!_name) {
        showToast({
          message: "请输入昵称",
        });
        return false;
      }
      let oParams = {};
      oParams.nickname = _name;
      let res = await this.$axios.post(UPDATE_PERSONAL_NICKNAME, oParams);
      if (res.code == 200) {
        showToast({
          message: "保存成功",
          type: "success",
        });
        this.$router.go("-1");
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/my/nickname.less";
</style>